import { TinyColor } from '@ctrl/tinycolor';
import { Button, ConfigProvider } from 'antd';

const colors1 = ['#6253E1', '#04BEFE'];

const getHoverColors = (colors: string[]) =>
  colors.map((color) => new TinyColor(color).lighten(5).toString());
const getActiveColors = (colors: string[]) =>
  colors.map((color) => new TinyColor(color).darken(5).toString());

interface buttonProps {
  Msg: string;
}

export const ButtonMsg: React.FC<buttonProps> = ({ Msg }) => {
  return (
    <ConfigProvider
      theme={{
        components: {
          Button: {
            colorPrimary: `linear-gradient(135deg, ${colors1.join(', ')})`,
            colorPrimaryHover: `linear-gradient(135deg, ${getHoverColors(colors1).join(', ')})`,
            colorPrimaryActive: `linear-gradient(135deg, ${getActiveColors(colors1).join(', ')})`,
            lineWidth: 0,
          },
        },
      }}
    >
      <Button
        type="primary"
        style={{
          fontSize: '1rem',
          textAlign: 'center',
          width: '100%',
          height: '100%',
        }}
      >
        {Msg}
      </Button>
    </ConfigProvider>
  );
};
